<template lang="pug">
  el-row.tobanScheduleItem(:gutter="12")
    el-col(:span="8")
      template(v-if="!isEdit")
        el-tag(size="mini") {{dictFilter(String(course.category), 'courseCategory')}}
        span.ml5.f12(v-if="!isEdit") {{course.begin}} ~ {{course.end}}
      el-time-picker(
        v-else
        is-range
        :clearable="false"
        size="mini"
        v-model="course.timeRange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        style="width: 100%"
      )
    el-col(:span="8")
      span.f12(v-if="!isEdit") {{course.activityContent}}
      el-button(v-else type="primary" size="mini" :disabled="timeOver") 选择课程
    el-col.tr(:span="8" v-if="!isAdd")
      el-button(:icon="`${isEdit ? 'el-icon-check' : 'el-icon-edit'}`" @click="() => editHandle()" type="primary" size="mini" circle)
      el-button(icon="el-icon-edit-outline" type="info"  size="mini" circle)
      el-button(icon="el-icon-close" size="mini" circle @click="$emit('delHandle', value.id)")
</template>
<script>
import dayjs from 'dayjs'
import dictMixin from '@/mixins/dict'

export default {
  mixins: [dictMixin],
  props: {
    list: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: Object,
      default: () => (null)
    },
    isAdd: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      course: {
        timeRange: []
      },
      isEdit: this.isAdd // 编辑状态
    }
  },
  computed: {
    // 时间是否存在重叠
    timeOver () {
      const { list, course } = this
      const { timeRange } = course
      return list.some(item => !(timeRange[0].getTime() >= item.endDate || timeRange[1].getTime() <= item.beginDate) && course.id !== item.id)
    }
  },
  watch: {
    value: {
      handler (val) {
        this.course = {
          ...val,
          timeRange: [
            new Date(val.beginDate),
            new Date(val.endDate)
          ]
        }
      },
      immediate: true
    }
  },
  methods: {
    editHandle () {
      this.isEdit = !this.isEdit
      const { timeRange } = this.course
      this.course = {
        ...this.course,
        begin: timeRange ? dayjs(timeRange[0]).format('HH:mm:ss') : '',
        end: timeRange ? dayjs(timeRange[1]).format('HH:mm:ss') : ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tobanScheduleItem {
  margin-bottom: 16px
}
</style>
